<template>
  <div class="mine">
    <div class="top-container">
      <div class="wrapper-icon">
        <img v-if="user.iconUrl == null || user.iconUrl == ''" src="static/img/server/usericon.png"  />
        <img v-else :src="$platIMG + user.iconUrl"  />
      </div>
      <div class="wrapper-info">
        <div class="info-text">{{user.nickName}} | {{genderText}}</div>
        <div class="info-text">当前角色：{{isGuideText}}</div>
      </div>
      <div class="wrapper-button" v-if="!isLogin">
        <mt-button size="small" @click.native="$router.push('/login')">
          <img src="static/img/server/register.png" height="20" width="20" slot="icon" />
          注册/登录
        </mt-button>
      </div>
    </div>
    <div class="info-perfect" v-if="!isGuide">
      <div class="wrapper-button">
        <mt-button size="small">
          <img src="static/img/server/register.png" height="20" width="20" slot="icon" />
          成为向导
        </mt-button>
      </div>
    </div>
    <div class="info-perfect" v-if="isGuide">
      <div class="left">
        <h3>资料完善</h3>
        <p>可以提高你的评分星级同时提升游客对你的信任度</p>
        <div class="button-wrapper" @click="$router.push('/personalDataEdit/'+ user.id)">
          <mt-button size="small">去完善</mt-button>
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="content">
      <div class="my-cell">
        <div class="cell-label" @click="isLogin ?  $router.push('/personal/'+user.id + '/edit') : $router.push('/login');">
          <span slot="icon" class="iconfont">&#xe61f;</span>
          个人主页
          <span slot="icon" class="iconfont icon-angle-right">&#xe614;</span>
        </div>
      </div>
      <!-- <div class="my-cell">
        <div class="cell-label">
          <span slot="icon" class="iconfont">&#xe708;</span>
          账号绑定
          <span slot="icon" class="iconfont icon-angle-right">&#xe614;</span>
        </div>
      </div> -->
      <div class="my-cell">
        <div class="cell-label" @click="$router.push('/about');">
          <span slot="icon" class="iconfont">&#xe62f;</span>
          关于风车旅行
          <span slot="icon" class="iconfont icon-angle-right">&#xe614;</span>
        </div>
      </div>
      <div class="my-cell" @click="handleLogOutClick">
        <div class="cell-label">
          <span slot="icon" class="iconfont">&#xe623;</span>
          退出登录
          <span slot="icon" class="iconfont icon-angle-right">&#xe614;</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import { mapMutations, mapActions, mapState } from "vuex";
import { getDictionaryKey,validLogin } from "@/libs/util.js";
import { fetchGetData,fetchPostData } from "@/api/fetch.js";
export default {
  name: "Mine",
  data() {
    return {
      user:{},
      isGuide: false,
      personalPopupVisible: false,
      isGuideText:"",
      genderText:"",
      isLogin:false,
    };
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    handleLogOutClick() {
      // MessageBox.confirm("确定退出登录?").then(action => {
      //   console.log(action);
      //   console.log("log out !");
      // });
      MessageBox({
        title: "提示",
        message: "确定退出登录?",
        showCancelButton: true
      }).then(res => {
        console.log(res);
        if (res === "confirm") {
          this.handleLogOut().then(() => {
            this.$router.push("/login");
          });
        }
      });
    },      
  },
  // computed: mapState({
  //   user: state => state.user
  // }),
  activated() {
    this.isLogin = validLogin();
    this.user = this.$store.state.user;
    // console.log(localStorage);
    this.isGuideText = getDictionaryKey('key1004', this.user.isGuide);
    this.genderText = getDictionaryKey('key1000', this.user.gender);
    if(this.user.isGuide == "1") {
      this.isGuide = true;
    } else if(this.user.isGuide == "0") {
      this.isGuide = false;
    }
  }
};
</script>
<style lang="stylus"  scoped>
@import '~@/assets/style/variable.styl';

.mine {
  background-color: #F2F2F2;
  height 100%;

  .top-container {
    display: flex;
    background-color: $themeColor;
    padding: 0.5rem;

    .wrapper-icon {
      border-radius: 0.75rem;
      border:4px solid #fff;
      width: 67px;
      height: 67px;
      background-color: #fff;
      overflow: hidden;
      float: left;

      img {
        width 67px
        height 67px
      }
    }

    .wrapper-info {
      height: 1.5rem;
      flex: 1;
      padding-left: 0.2rem;
      line-height: 1.5rem;

      .info-text {
        height: 0.75rem;
        line-height: 0.75rem;
        font-size: 0.3rem;
      }
    }

    .wrapper-button {
      .mint-button {
        color: #fff;
        background-color: #2c2c2c;
        border-radius: 0.4rem;
      }
    }
  }

  .info-perfect {
    padding: 0.3rem;
    display: flex;

    .left {
      flex: 1;

      h3 {
        font-size: 0.4rem;
        font-weight: bold;
        height: 0.5rem;
        line-height: 0.5rem;
      }

      p {
        margin-top: 0.2rem;
      }

      .button-wrapper {
        margin-top: 0.2rem;

        .mint-button {
          color: $themeColor;
          height: 0.5rem;
          // background-color: #2c2c2c;
          border-radius: 0.4rem;
          font-size: 0.25rem;
        }
      }
    }

    .right {
      float: right;
      height: 1.8rem;
      width: 1.8rem;
      margin-left: 0.2rem;
    }
  }

  .content {
    margin-top: 0.2rem;

    .my-cell {
      height: 1rem;
      line-height: 1rem;
      background-color: #fff;
      border-bottom: 1px solid #dbdbdb;

      .cell-label {
        font-size: 0.3rem;
        margin-left: 0.3rem;

        .iconfont {
          font-size: 0.4rem;
          margin-right: 0.1rem;
          color: $themeColor;
        }
      }

      .iconfont.icon-angle-right {
        font-size: 0.2rem;
        float: right;
        margin-right: 0.3rem;
        color: #8a8a8a;
      }
    }
  }

  .mint-popup-3 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;
  }

  .mint-popup-3 .mint-button {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }
}
</style>